<template>
  <div>
    <page-search :formConfig="userFormConfig" @fetchData="getUserList" />
    <div class="content">
      <table-page v-bind="userTableConfig" ref="tableRef">
        <template #header>
          <el-button type="primary" @click="openEditModal(event, 'add')">新增</el-button>
        </template>
        <template #status="{ currentrow }">
          <el-button size="small" :type="currentrow.enable === 1 ? 'success' : 'danger'" plain>{{
            currentrow.enable === 1 ? '启用' : '禁用'
          }}</el-button>
        </template>
        <template #createAt="{ currentrow }">
          {{ $filters.formateUtcTime(currentrow.createAt) }}
        </template>
        <template #updateAt="slotProps">
          {{ $filters.formateUtcTime(slotProps.currentrow.updateAt) }}
        </template>
        <template #handler="{ currentrow }">
          <div class="btns">
            <el-button link @click="openEditModal(currentrow, 'edit')">编辑</el-button>
            <el-button link @click="handelDelete(currentrow.id)">删除</el-button>
          </div>
        </template>
      </table-page>
    </div>
    <page-modal
      ref="pageModalRef"
      :formConfig="userModalConfig"
      @addConfirmed="handleEditConfirm"
      @editConfirmed="handleAddConfirm"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import PageSearch from '@/components/pageSearch/index.vue'
import TablePage from '@/components/table/table.vue'
import pageModal from '@/components/pageModal/index.vue'

import { userFormConfig } from './config/form-config'
import { userTableConfig } from './config/table-config'
import { userModalConfig } from './config/modal-config'

import { getUserList, getDeptList, getRoleList, addUser, updateUser, deleteUser } from '@/service/user/user'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
  components: {
    PageSearch,
    TablePage,
    pageModal
  },
  setup() {
    onMounted(async () => {
      const { code, data } = await getDeptList({ offset: 0, size: 1000 })
      if (code === 0) {
        const target = userModalConfig.formItems.find((item) => item.prop === 'departmentId')
        target!.options = data.list.map((item) => {
          return { value: item.id, text: item.name }
        })
      }
      const { code: resCode, data: resData } = await getRoleList({ offset: 0, size: 1000 })
      if (resCode === 0) {
        const target = userModalConfig.formItems.find((item) => item.prop === 'roleId')
        target!.options = resData.list.map((item) => {
          return { value: item.id, text: item.name }
        })
      }
    })

    const pageModalRef = ref()
    const tableRef = ref()

    const openEditModal = (params, type) => {
      const target = userModalConfig.formItems.find((item) => item.prop === 'password')
      if (type === 'edit' && target) {
        target.isHidden = true
      } else if (type === 'add' && target?.isHidden) {
        target.isHidden = false
      }
      pageModalRef.value.open(params, type)
    }
    const handleAddConfirm = async (val: any) => {
      const { code } = await addUser(val)
      if (code === 0) {
        ElMessage({
          message: '新增成功',
          type: 'success'
        })
        pageModalRef.value.cancel()
        tableRef.value.fetchData()
      }
    }
    const handleEditConfirm = async (val) => {
      const { name, realName, departmentId, roleId, cellphone } = val
      const params = {
        name,
        realName,
        departmentId,
        roleId,
        cellphone
      }
      const { code } = await updateUser(val.id, params)
      if (code === 0) {
        pageModalRef.value.cancel()
        tableRef.value.fetchData()
      }
    }
    const handelDelete = (id) => {
      ElMessageBox.confirm('您是否确删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(id).then((res) => {
          if (res.code === 0) {
            tableRef.value.fetchData()
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
          }
        })
      })
    }
    return {
      userFormConfig,
      userTableConfig,
      userModalConfig,
      pageModalRef,
      tableRef,
      getUserList,
      openEditModal,
      handleAddConfirm,
      handleEditConfirm,
      handelDelete
    }
  }
})
</script>

<style scoped>
.content {
  padding-top: 10px;
  background-color: #f5f5f5;
}
</style>
